React 배치(Batching): 고성능 애플리케이션을 위한 상태 업데이트 최적화 전략

사용자 인터페이스 구축을 위한 강력한 자바스크립트 라이브러리인 React는 최적의 성능을 추구합니다. 이를 위해 사용하는 핵심 메커니즘 중 하나는 상태 업데이트 처리 방식을 최적화하는 배치(batching)입니다. React 배치를 이해하는 것은 특히 애플리케이션의 복잡성이 증가할 때, 고성능의 반응형 애플리케이션을 구축하는 데 매우 중요합니다. 이 종합 가이드에서는 React 배치의 복잡한 측면을 깊이 파고들어 그 이점, 다양한 전략, 그리고 효과를 극대화하기 위한 고급 기술들을 탐구합니다.

React 배치란 무엇인가?

React 배치는 여러 상태 업데이트를 하나의 리렌더(re-render)로 그룹화하는 과정입니다. React는 모든 상태 업데이트마다 컴포넌트를 리렌더링하는 대신, 모든 업데이트가 완료될 때까지 기다렸다가 단일 렌더링을 수행합니다. 이는 리렌더 횟수를 획기적으로 줄여 상당한 성능 향상을 가져옵니다.

동일한 이벤트 핸들러 내에서 여러 상태 변수를 업데이트해야 하는 시나리오를 생각해 봅시다:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setCountA(countA + 1);
    setCountB(countB + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

배치가 없다면 이 코드는 setCountA에 대한 리렌더 한 번, setCountB에 대한 리렌더 한 번, 총 두 번의 리렌더를 유발할 것입니다. 하지만 React 배치는 이러한 업데이트들을 지능적으로 그룹화하여 단일 리렌더로 처리하므로 더 나은 성능을 보여줍니다. 이는 특히 더 복잡한 컴포넌트와 잦은 상태 변경을 다룰 때 두드러집니다.

배치의 이점

React 배치의 주된 이점은 성능 향상입니다. 리렌더 횟수를 줄임으로써 브라우저가 해야 할 작업의 양을 최소화하여 더 부드럽고 반응이 빠른 사용자 경험을 제공합니다. 구체적으로, 배치는 다음과 같은 장점을 제공합니다:

• 리렌더 감소: 가장 큰 이점은 리렌더 횟수의 감소입니다. 이는 곧 CPU 사용량 감소와 더 빠른 렌더링 시간으로 이어집니다.
• 반응성 향상: 리렌더를 최소화함으로써 애플리케이션은 사용자 상호작용에 더 빠르게 반응하게 됩니다. 사용자는 지연을 덜 느끼고 더 유연한 인터페이스를 경험합니다.
• 성능 최적화: 배치는 애플리케이션의 전반적인 성능을 최적화하여, 특히 리소스가 제한된 기기에서 더 나은 사용자 경험을 제공합니다.
• 에너지 소비 감소: 리렌더 횟수가 줄어들면 에너지 소비도 감소하는데, 이는 모바일 기기와 노트북에서 중요한 고려 사항입니다.

React 18 이상의 자동 배치

React 18 이전에는 배치가 주로 React 이벤트 핸들러 내의 상태 업데이트에만 국한되었습니다. 즉, setTimeout, 프로미스(promise), 네이티브 이벤트 핸들러 내의 상태 업데이트와 같이 이벤트 핸들러 외부에서 발생하는 업데이트는 배치 처리되지 않았습니다. React 18에서는 자동 배치를 도입하여, 업데이트가 어디에서 발생하든 거의 모든 상태 업데이트를 포함하도록 배치를 확장했습니다. 이 개선 사항은 성능 최적화를 크게 단순화하고 수동 개입의 필요성을 줄여줍니다.

자동 배치를 통해 다음 코드는 이제 React 18에서 배치 처리됩니다:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

이 예제에서 상태 업데이트가 setTimeout 콜백 내에 있음에도 불구하고 React 18은 이를 단일 리렌더로 배치 처리합니다. 이러한 자동 동작은 성능 최적화를 단순화하고 다양한 코드 패턴에 걸쳐 일관된 배치를 보장합니다.

배치가 발생하지 않는 경우 (그리고 대처 방법)

React의 자동 배치 기능에도 불구하고, 배치가 예상대로 발생하지 않는 상황이 있습니다. 이러한 시나리오를 이해하고 대처 방법을 아는 것은 최적의 성능을 유지하는 데 중요합니다.

1. React 렌더 트리 외부의 업데이트

상태 업데이트가 React의 렌더 트리 외부(예: DOM을 직접 조작하는 라이브러리 내)에서 발생하면 배치가 자동으로 이루어지지 않습니다. 이런 경우에는 수동으로 리렌더를 트리거하거나 React의 재조정(reconciliation) 메커니즘을 사용하여 일관성을 보장해야 할 수 있습니다.

2. 레거시 코드 또는 라이브러리

오래된 코드베이스나 서드파티 라이브러리는 React의 배치 메커니즘을 방해하는 패턴에 의존할 수 있습니다. 예를 들어, 라이브러리가 명시적으로 리렌더를 트리거하거나 오래된 API를 사용할 수 있습니다. 이러한 경우 코드를 리팩토링하거나 React의 배치 동작과 호환되는 대체 라이브러리를 찾아야 할 수 있습니다.

3. 즉각적인 렌더링이 필요한 긴급 업데이트

드문 경우지만 특정 상태 업데이트에 대해 즉각적인 리렌더를 강제해야 할 수도 있습니다. 이는 업데이트가 사용자 경험에 중요하여 지연될 수 없을 때 필요할 수 있습니다. React는 이러한 상황을 위해 flushSync API를 제공합니다(아래에서 자세히 설명).

상태 업데이트 최적화 전략

React 배치는 자동적인 성능 향상을 제공하지만, 상태 업데이트를 추가로 최적화하여 훨씬 더 좋은 결과를 얻을 수 있습니다. 다음은 몇 가지 효과적인 전략입니다:

1. 관련 상태 업데이트 그룹화하기

가능할 때마다 관련 상태 업데이트를 단일 업데이트로 그룹화하세요. 이는 리렌더 횟수를 줄이고 성능을 향상시킵니다. 예를 들어, 여러 개별 상태 변수를 업데이트하는 대신, 모든 관련 값을 포함하는 객체를 가진 단일 상태 변수를 사용하는 것을 고려해 보세요.

            
function MyComponent() {
  const [data, setData] = React.useState({
    name: '',
    email: '',
    age: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={data.name} onChange={handleChange} />
      <input type="email" name="email" value={data.email} onChange={handleChange} />
      <input type="number" name="age" value={data.age} onChange={handleChange} />
    </form>
  );
}

            

              
                Copy
              
            
          

이 예제에서는 모든 폼 입력 변경이 data 상태 변수를 업데이트하는 단일 handleChange 함수에 의해 처리됩니다. 이를 통해 모든 관련 상태 업데이트가 단일 리렌더로 배치 처리되도록 보장합니다.

2. 함수형 업데이트 사용하기

이전 값을 기반으로 상태를 업데이트할 때는 함수형 업데이트를 사용하세요. 함수형 업데이트는 이전 상태 값을 업데이트 함수의 인자로 제공하여, 비동기적인 시나리오에서도 항상 올바른 값으로 작업하도록 보장합니다.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment
    </button>
  );
}

            

              
                Copy
              
            
          

함수형 업데이트 setCount((prevCount) => prevCount + 1)를 사용하면 여러 업데이트가 함께 배치 처리되더라도 업데이트가 올바른 이전 값을 기반으로 한다는 것을 보장합니다.

3. useCallback과 useMemo 활용하기

useCallback과 useMemo는 React 성능 최적화를 위한 필수적인 훅입니다. 이들은 함수와 값을 메모이제이션(memoize)하여 자식 컴포넌트의 불필요한 리렌더를 방지할 수 있게 해줍니다. 이는 이러한 값에 의존하는 자식 컴포넌트에 props를 전달할 때 특히 중요합니다.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <ChildComponent increment={increment} />
  );
}

function ChildComponent({ increment }) {
  React.useEffect(() => {
    console.log('ChildComponent rendered');
  });
  return (<button onClick={increment}>Increment</button>);
}

            

              
                Copy
              
            
          

이 예제에서 useCallback은 increment 함수를 메모이제이션하여, 의존성이 변경될 때만(이 경우 없음) 함수가 변경되도록 보장합니다. 이는 count 상태가 변경될 때 ChildComponent가 불필요하게 리렌더링되는 것을 방지합니다.

4. 디바운싱(Debouncing)과 스로틀링(Throttling)

디바운싱과 스로틀링은 함수가 실행되는 빈도를 제한하는 기술입니다. 스크롤 이벤트나 입력 변경과 같이 잦은 업데이트를 유발하는 이벤트를 처리하는 데 특히 유용합니다. 디바운싱은 특정 기간 동안 아무런 활동이 없을 때만 함수가 실행되도록 보장하며, 스로틀링은 주어진 시간 간격 내에 함수가 최대 한 번만 실행되도록 보장합니다.

            
import { debounce } from 'lodash';

function MyComponent() {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  };

  const search = (term) => {
    console.log('Searching for:', term);
    // Perform search logic here
  };

  const debouncedSearch = React.useMemo(() => debounce(search, 300), []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
}

            

              
                Copy
              
            
          

이 예제에서는 Lodash의 debounce 함수를 사용하여 search 함수를 디바운싱합니다. 이를 통해 사용자가 300밀리초 동안 타이핑을 멈춘 후에만 검색 함수가 실행되도록 보장하여 불필요한 API 호출을 방지하고 성능을 향상시킵니다.

고급 기술: requestAnimationFrame과 flushSync

더 고급 시나리오를 위해 React는 requestAnimationFrame과 flushSync라는 두 가지 강력한 API를 제공합니다. 이러한 API를 사용하면 상태 업데이트의 타이밍을 미세 조정하고 리렌더가 발생하는 시점을 제어할 수 있습니다.

1. requestAnimationFrame

requestAnimationFrame은 다음 리페인트(repaint)가 일어나기 전에 함수 실행을 예약하는 브라우저 API입니다. 주로 애니메이션 및 기타 시각적 업데이트를 부드럽고 효율적인 방식으로 수행하는 데 사용됩니다. React에서는 requestAnimationFrame을 사용하여 상태 업데이트를 배치 처리하고 브라우저의 렌더링 주기와 동기화되도록 할 수 있습니다.

            
function MyComponent() {
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    const animate = () => {
      requestAnimationFrame(() => {
        setPosition((prevPosition) => prevPosition + 1);
        animate();
      });
    };

    animate();
  }, []);

  return (
    <div style={{ transform: `translateX(${position}px)` }}>
      Moving Element
    </div>
  );
}

            

              
                Copy
              
            
          

이 예제에서는 requestAnimationFrame을 사용하여 position 상태 변수를 지속적으로 업데이트하여 부드러운 애니메이션을 만듭니다. requestAnimationFrame을 사용하면 업데이트가 브라우저의 렌더링 주기와 동기화되어, 버벅거리는(janky) 애니메이션을 방지하고 최적의 성능을 보장합니다.

2. flushSync

flushSync는 DOM에 대한 즉각적인 동기적 업데이트를 강제하는 React API입니다. 일반적으로 외부 라이브러리와 상호 작용하거나 중요한 UI 업데이트를 수행할 때와 같이 상태 업데이트가 UI에 즉시 반영되어야 하는 드문 경우에 사용됩니다. 배치의 성능 이점을 무효화할 수 있으므로 아껴서 사용해야 합니다.

            
import { flushSync } from 'react-dom';

function MyComponent() {
  const [text, setText] = React.useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    flushSync(() => {
      setText(value);
    });
    // Perform other synchronous operations that rely on the updated text
    console.log('Text updated synchronously:', value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

            

              
                Copy
              
            
          

이 예제에서는 flushSync를 사용하여 입력이 변경될 때마다 text 상태 변수를 즉시 업데이트합니다. 이를 통해 업데이트된 텍스트에 의존하는 모든 후속 동기 작업이 올바른 값에 접근할 수 있도록 보장합니다. flushSync는 React의 배치 메커니즘을 방해하고 과도하게 사용하면 잠재적으로 성능 문제를 일으킬 수 있으므로 신중하게 사용하는 것이 중요합니다.

실제 적용 사례: 글로벌 이커머스와 금융 대시보드

React 배치와 최적화 전략의 중요성을 설명하기 위해 두 가지 실제 사례를 살펴보겠습니다:

1. 글로벌 이커머스 플랫폼

글로벌 이커머스 플랫폼은 상품 탐색, 장바구니 담기, 구매 완료 등 대량의 사용자 상호작용을 처리합니다. 적절한 최적화가 없으면 장바구니 총액, 상품 재고, 배송비와 관련된 상태 업데이트가 수많은 리렌더를 유발하여, 특히 신흥 시장의 인터넷 연결이 느린 사용자에게는 느린 사용자 경험을 초래할 수 있습니다. React 배치와 검색어 디바운싱, 장바구니 총액 업데이트 스로틀링과 같은 기술을 구현함으로써 플랫폼은 성능과 반응성을 크게 향상시켜 전 세계 사용자에게 원활한 쇼핑 경험을 보장할 수 있습니다.

2. 금융 대시보드

금융 대시보드는 실시간 시장 데이터, 포트폴리오 성과 및 거래 내역을 표시합니다. 대시보드는 최신 시장 상황을 반영하기 위해 자주 업데이트되어야 합니다. 그러나 과도한 리렌더는 버벅거리고 반응이 없는 인터페이스로 이어질 수 있습니다. 비용이 많이 드는 계산을 메모이제이션하기 위한 useMemo와 브라우저의 렌더링 주기와 업데이트를 동기화하기 위한 requestAnimationFrame과 같은 기술을 활용함으로써 대시보드는 빈번한 데이터 업데이트에도 불구하고 부드럽고 유연한 사용자 경험을 유지할 수 있습니다. 또한, 금융 데이터 스트리밍에 자주 사용되는 서버 전송 이벤트(SSE)는 React 18의 자동 배치 기능의 큰 이점을 얻습니다. SSE를 통해 수신된 업데이트는 자동으로 배치 처리되어 불필요한 리렌더를 방지합니다.

결론

React 배치는 애플리케이션의 성능을 크게 향상시킬 수 있는 기본적인 최적화 기술입니다. 배치의 작동 방식을 이해하고 효과적인 최적화 전략을 구현함으로써, 애플리케이션의 복잡성이나 사용자의 위치에 관계없이 훌륭한 사용자 경험을 제공하는 고성능의 반응형 사용자 인터페이스를 구축할 수 있습니다. React 18의 자동 배치부터 requestAnimationFrame, flushSync와 같은 고급 기술에 이르기까지 React는 상태 업데이트를 미세 조정하고 성능을 극대화하기 위한 풍부한 도구 모음을 제공합니다. React 애플리케이션을 지속적으로 모니터링하고 최적화함으로써 전 세계 사용자들이 빠르고 반응이 좋으며 즐겁게 사용할 수 있도록 보장할 수 있습니다.